<template>
	<view>
		
	<!-- 	<view class="text-line1" style="height: 90upx;background-color: #FFFFFF;margin-left: 0;padding-left: 20upx;">
			<text class="text-name"
				style="flex-grow: 1;color: #333333;font-size: 28upx;">订单编号:{{filterNull(vehicleInfo.orderCarCode)}}</text>

			<!--融租，以租代购， 经租， 直购 -->
<!-- 			<view class="order-status">{{filterNull(vehicleInfo.rentTypeStr)}}</view>
		</view> -->
		<view class="title-wrap" style='margin:32upx;height: auto;margin-bottom: 14upx;'>
			<view class='title-text1'>
				{{filterNull(vehicleInfo.flowStatusStr)}}
			</view>
			<view class='title-text-box'>
				{{filterNull(vehicleInfo.rentTypeStr)}}
			</view>
		</view>
		<view class="item1">
			<view class="text-line1">
				<text class="text-name" style='color:#000000;font-size: 28upx;'>订单编号:</text>
				<text class="text-value" style='color:#000000;font-size: 28upx;'>{{filterNull(vehicleInfo.orderCarCode)}}</text>
			</view>
			<view class='line'></view>
			<view class="text-line1">
				<text class="text-name">车牌号:</text>
				<text class="text-value">{{filterNull(vehicleInfo.carNo)}}</text>
			</view>
			<view class="text-line1">
				<text class="text-name">品牌/车型/车系:</text>
				<text class="text-value">{{filterNull(vehicleInfo.brandSeriesModelName)}}</text>
			</view>
			<view class="text-line1">
				<text class="text-name">车架号:</text>
				<text class="text-value">{{filterNull(vehicleInfo.vinNo)}}</text>
			</view>
		</view>


		<!-- 交强险 -->
		<view class="item1">
			<view class="title-wrap" style='margin: 0;height: auto;margin-bottom: 14upx;'>
				<view class='title-text'>
					交强险保单信息
				</view>
				<view class="warn-info1">
					{{ compulsoryDetail.jqPolicyPrescriptionStr ? compulsoryDetail.jqPolicyPrescriptionStr : '' }}
				</view>
			</view>

			<view v-if="compulsoryDetail!=null">

				<view class="text-line1">
					<text class="text-name">交强险开始时间:</text>
					<text class="text-value">{{filterNull(compulsoryDetail.compulsoryStartTime)}}</text>
				</view>

				<view class="text-line1">
					<text class="text-name">交强险结束时间:</text>
					<text class="text-value">{{filterNull(compulsoryDetail.compulsoryEndTime)}}</text>
				</view>

				<view class="text-line1">
					<text class="text-name">交强险保单号:</text>
					<text class="text-value">{{filterNull(compulsoryDetail.compulsoryNo)}}</text>
				</view>

				<view class="text-line1">
					<text class="text-name">保险公司:</text>
					<text class="text-value">{{filterNull(compulsoryDetail.compulsoryCompany)}}</text>
				</view>

				<view class="text-line1">
					<text class="text-name">保险公司联系电话:</text>
					<text class="text-value">{{filterNull(compulsoryDetail.compulsoryCompanyPhone)}}</text>
				</view>

				<view class="text-line1">
					<text class="text-name">备注:</text>
					<text class="text-value">{{filterNull(compulsoryDetail.compulsoryRemark)}}</text>
				</view>

				<view class="text-line1">
					<text class="text-name">费用:</text>
					<text
						class="text-value">￥{{ compulsoryDetail.compulsoryAmount?compulsoryDetail.compulsoryAmount:'0' }}</text>
				</view>

				<view style="margin: 0 0 20upx 20upx;" v-if="compulsoryDetail.compulsoryUrlList.length>0">
					<view class="text-name" style="margin-bottom: 18upx;">保单照片</view>
					<u-album :urls="compulsoryDetail.compulsoryUrlList" rowCount="4"></u-album>
				</view>

				<view class="text-line1" v-if="compulsoryDetail.compulsoryAccessoryVOList!=null"
					v-for="(item, index) in compulsoryDetail.compulsoryAccessoryVOList" :key="index"
					@click="checkFile(item)">
					<view class="text-name">{{item.nameAccessory}}</view>
					<view class="text-value" style="color: #009B01;">查看</view>
				</view>


			</view>
			<no-data v-if='compulsoryDetail==null' content="暂无交强险"></no-data>

		</view>
		
		<!-- 承运险 -->
		<view class="item1">
			<view class="title-wrap" style='margin: 0;height: auto;margin-bottom: 14upx;'>
				<view class='title-text'>
					承运险保单信息
				</view>
				<view class="warn-info1">
					{{  carrierInsuranceManageInfo.cyPolicyPrescriptionStr ?  carrierInsuranceManageInfo.cyPolicyPrescriptionStr : '' }}
				</view>
			</view>
		
			<view v-if=" carrierInsuranceManageInfo!=null">
		
				<view class="text-line1">
					<text class="text-name">承运险开始时间:</text>
					<text class="text-value">{{filterNull( carrierInsuranceManageInfo.carrierStartTime)}}</text>
				</view>
		
				<view class="text-line1">
					<text class="text-name">承运险结束时间:</text>
					<text class="text-value">{{filterNull( carrierInsuranceManageInfo.carrierEndTime)}}</text>
				</view>
		
				<view class="text-line1">
					<text class="text-name">承运险保单号:</text>
					<text class="text-value">{{filterNull( carrierInsuranceManageInfo.carrierNo)}}</text>
				</view>
		
				<view class="text-line1">
					<text class="text-name">保险公司:</text>
					<text class="text-value">{{filterNull( carrierInsuranceManageInfo.carrierCompany)}}</text>
				</view>
		
				<view class="text-line1">
					<text class="text-name">保险公司联系电话:</text>
					<text class="text-value">{{filterNull( carrierInsuranceManageInfo.carrierCompanyPhone)}}</text>
				</view>
		
				<view class="text-line1">
					<text class="text-name">备注:</text>
					<text class="text-value">{{filterNull( carrierInsuranceManageInfo.carrierRemark)}}</text>
				</view>
		
				<view class="text-line1">
					<text class="text-name">费用:</text>
					<text
						class="text-value">￥{{  carrierInsuranceManageInfo.carrierAmount? carrierInsuranceManageInfo.carrierAmount:'0' }}</text>
				</view>
		
				<view style="margin: 0 0 20upx 20upx;" v-if=" carrierInsuranceManageInfo.carrierUrlList.length>0">
					<view class="text-name" style="margin-bottom: 18upx;">保单照片</view>
					<u-album :urls=" carrierInsuranceManageInfo.carrierUrlList" rowCount="4"></u-album>
				</view>
		
				<view class="text-line1" v-if=" carrierInsuranceManageInfo.carrierAccessoryVOList!=null"
					v-for="(item, index) in  carrierInsuranceManageInfo.carrierAccessoryVOList" :key="index"
					@click="checkFile(item)">
					<view class="text-name">{{item.nameAccessory}}</view>
					<view class="text-value" style="color: #009B01;">查看</view>
				</view>
		
		
			</view>
			<no-data v-if=' carrierInsuranceManageInfo==null' content="暂无承运险"></no-data>
		
		</view>
		
		<!-- 商业险 -->
		<view class="item1">
			<view class="title-wrap" style='margin: 0;height: auto;margin-bottom: 14upx;'>
				<view class='title-text'>
					商业险保单信息
				</view>
				<view class="warn-info1">
					{{ commercialDetail.syPolicyPrescriptionStr ? commercialDetail.syPolicyPrescriptionStr : '' }}
				</view>
			</view>

			<view v-if="commercialDetail!=null">

				<view class="text-line1">
					<text class="text-name">商业险开始时间:</text>
					<text class="text-value">{{filterNull(commercialDetail.commercialStartTime)}}</text>
				</view>

				<view class="text-line1">
					<text class="text-name">商业险结束时间:</text>
					<text class="text-value">{{filterNull(commercialDetail.commercialEndTime)}}</text>
				</view>

				<view class="text-line1">
					<text class="text-name">商业险保单号:</text>
					<text class="text-value">{{filterNull(commercialDetail.commercialNo)}}</text>
				</view>

				<view class="text-line1">
					<text class="text-name">保险公司:</text>
					<text class="text-value">{{filterNull(commercialDetail.commercialCompany)}}</text>
				</view>

				<view class="text-line1">
					<text class="text-name">保险公司联系电话:</text>
					<text class="text-value">{{filterNull(commercialDetail.commercialCompanyPhone)}}</text>
				</view>

				<view class="text-line1">
					<text class="text-name">备注:</text>
					<text class="text-value">{{filterNull(commercialDetail.commercialRemark)}}</text>
				</view>

				<view class="text-line1">
					<text class="text-name">费用:</text>
					<text
						class="text-value">￥{{ commercialDetail.commercialAmount?commercialDetail.commercialAmount:'0' }}</text>
				</view>

				<view style="margin: 0 0 20upx 20upx;" v-if="commercialDetail.commercialUrlList.length>0">
					<view class="text-name" style="margin-bottom: 18upx;">保单照片</view>
					<u-album :urls="commercialDetail.commercialUrlList" rowCount="4"></u-album>
				</view>

				<view class="text-line1" v-if="commercialDetail.commercialAccessoryVOList!=null"
					v-for="(item, index) in commercialDetail.commercialAccessoryVOList" :key="index"
					@click="checkFile(item)">
					<view class="text-name">{{item.nameAccessory}}</view>
					<view class="text-value" style="color: #009B01;">查看</view>
				</view>


			</view>
			<no-data v-if='commercialDetail==null' content="暂无商业险"></no-data>

		</view>


		<!-- 年检 -->
		<view class="item1">
			<view class="title-wrap" style='margin: 0;height: auto;margin-bottom: 14upx;'>
				<view class='title-text'>
					年检信息
				</view>
				<view class="warn-info1">
					{{ annualInspection.prompt ? annualInspection.prompt : '' }}
				</view>
			</view>

			<view v-if="annualInspection && annualInspection.inspectionId">

				<view class="text-line1">
					<text class="text-name">本次年检时间:</text>
					<text class="text-value">{{filterNull(annualInspection.thisTimeInspectionTime)}}</text>
				</view>

				<view class="text-line1">
					<text class="text-name">下次年检时间:</text>
					<text class="text-value">{{filterNull(annualInspection.nextInspectionTime)}}</text>
				</view>

				<view class="text-line1">
					<text class="text-name">年审代理人:</text>
					<text class="text-value">{{filterNull(annualInspection.inspectionAgent)}}</text>
				</view>

				<view class="text-line1">
					<text class="text-name">备注:</text>
					<text class="text-value">{{filterNull(annualInspection.remark)}}</text>
				</view>

				<view style="margin: 0 0 20upx 20upx;" v-if="annualInspection.inspectionUrlList.length>0">
					<view class="text-name" style="margin-bottom: 18upx;">年检附件</view>
					<u-album :urls="annualInspection.inspectionUrlList" rowCount="4"></u-album>
				</view>

				<view class="text-line1" v-if="annualInspection.inspectionList!=null"
					v-for="(item, index) in annualInspection.inspectionList" :key="index" @click="checkFile(item)">
					<view class="text-name">{{item.nameAccessory}}</view>
					<view class="text-value" style="color: #009B01;">查看</view>
				</view>


			</view>
			<no-data v-else content="暂无年检"></no-data>
		</view>

		<!-- 保养 -->
		<view class="item1">
			<view class="title-wrap" style='margin: 0;height: auto;margin-bottom: 14upx;'>
				<view class='title-text'>
					保养信息
				</view>
				<view class="warn-info1">
					{{ maintenance.prompt ? maintenance.prompt : '' }}
				</view>
			</view>

			<view v-if="maintenance && maintenance.maintenanceId">

				<view class="text-line1">
					<text class="text-name">服务站名称:</text>
					<text class="text-value">{{filterNull(maintenance.serviceSite)}}</text>
				</view>

				<view class="text-line1">
					<text class="text-name">下次保养公里数:</text>
					<text class="text-value">{{maintenance.nextMile ? maintenance.nextMile + '/km' : '--'}}</text>
					<text class="text-value" style="color: #E04B28;"
						v-if="maintenance.isNextMilePromptStr">{{maintenance.isNextMilePromptStr}}</text>
				</view>

				<view class="text-line1">
					<text class="text-name">下次保养时间:</text>
					<text class="text-value">{{filterNull(maintenance.nextDate)}}</text>
					<text class="text-value" style="color: #E04B28;"
						v-if="maintenance.isNextDatePromptStr">{{maintenance.isNextDatePromptStr}}</text>
				</view>

				<view class="text-line1">
					<text class="text-name">本次保养时间:</text>
					<text class="text-value">{{filterNull(maintenance.maintenanceDate)}}</text>
				</view>

				<view class="text-line1">
					<text class="text-name">备注:</text>
					<text class="text-value">{{filterNull(maintenance.maintenanceRemark)}}</text>
				</view>

				<view style="margin: 0 0 20upx 20upx;" v-if="maintenance.maintenanceUrlList.length>0">
					<view class="text-name" style="margin-bottom: 18upx;">保养附件</view>
					<u-album :urls="maintenance.maintenanceUrlList" rowCount="4"></u-album>
				</view>

				<view class="text-line1" v-if="maintenance.maintenanceFileLis!=null"
					v-for="(item, index) in maintenance.maintenanceFileLis" :key="index" @click="checkFile(item)">
					<view class="text-name">{{item.nameAccessory}}</view>
					<view class="text-value" style="color: #009B01;">查看</view>
				</view>


			</view>
			<no-data v-else content="暂无保养"></no-data>
		</view>

    <u-popup :safeAreaInsetBottom="true" mode="center" :show="showVideo" overlay :customStyle="{width:'100%'}"
             closeOnClickOverlay @close="close">

      <video id="myVideo" :src="videoUrl" controls style="width: 100%;"></video>
    </u-popup>

	</view>
</template>

<script>
	import {
		mycarinfo
	} from '../../../../common/api.js';

	export default {
		data() {
			return {
				carId: '',
				vehicleData: {},
				commercialDetail: null, // 商业险
				compulsoryDetail: null, // 交强险
				annualInspection: null, // 年检
				maintenance: null, // 保养
				carrierInsuranceManageInfo:null, // 承运
				showVideo: false,
				videoUrl: null,
				videoContext: null,
				vehicleInfo:{},
			}
		},
		methods: {
			getCarInfo() {
				mycarinfo({
					params: {
						carId: this.carId,
					}
				}).then(res => {
					this.commercialDetail = res.commercialInsuranceInfo; // 商业险
					this.compulsoryDetail = res.compulsoryInsuranceManageInfo; // 交强险
					this.annualInspection = res.inspectionInfo; // 年检
					this.carrierInsuranceManageInfo = res.carrierInsuranceManageInfo; // 承运险
					this.maintenance = res.maintenanceInfo; // 保养
					this.vehicleInfo = res;


					// this.commercialDetail.commercialUrlList = this.addpre(this.commercialDetail.commercialUrlList);
					// this.compulsoryDetail.compulsoryUrlList = this.addpre(this.compulsoryDetail.compulsoryUrlList);
					// this.annualInspection.inspectionUrlList = this.addpre(this.annualInspection.inspectionUrlList);
					// this.maintenance.maintenanceUrlList = this.addpre(this.maintenance.maintenanceUrlList);
				})
			},

      playvideo() {
        this.showVideo = true;
        this.videoContext.play();
      },

      close() {
        this.showVideo = false;
      },

			// checkFile(item) {
			// 	uni.downloadFile({
			// 		url: this.baseImageUrl + item.url,
			// 		success: function(res) {
			// 			var filePath = res.tempFilePath;
			// 			uni.openDocument({
			// 				filePath: filePath,
			// 				showMenu: true,
			// 				success: function(res) {
			// 				}
			// 			});
			// 		}
			// 	});
			// },

      checkFile(item) {
        uni.showLoading()
        let that = this

        let fileType = 'pdf'
        if (!uni.$u.test.isEmpty(item.url)) {
          fileType = item.url.split('.')[1]
        }

        if(fileType == 'mp4' || fileType == 'rmvb' || fileType == 'avi' || fileType == 'ts'){
          uni.hideLoading()
          that.videoUrl = item.url
          that.playvideo()
        }else {
          uni.downloadFile({
            url: item.url,
            filePath:'',
            success(res) {
              uni.hideLoading()
              let tempPath = res.tempFilePath
              uni.openDocument({
                showMenu:true,
                filePath: tempPath,
                fileType: fileType,
              })
            },
            fail(e){
              uni.hideLoading()
            }
          })
        }


      },

			addpre(list) {
				if (!uni.$u.test.isEmpty(list)) {
					list = list.map(
						(url) => this.baseImageUrl + url
					)
				}
				return list;
			},
		},

		onLoad(op) {
			this.carId = op.carId;
			this.getCarInfo();

      this.videoContext = uni.createVideoContext('myVideo');
		}

	}
</script>

<style lang="scss" scoped>
	.line{
		width: 100%;
		border-bottom: 1upx solid #F8F8F8;
		margin:16upx 0 32upx 0;
	}
	.title-text-box{
		background-color: #DDEFFE;
		color:#173B42;
		font-size: 26upx;
		padding:4upx 16upx;
		border-radius: 4upx;
	}
	.coupon{
		color:#FF6A15 ;
		font-size: 26upx;
	}
	.title-text1{
		color:#173B42;
		font-size: 36upx;
		font-weight: bold;
		
	}
	.text-line1{
		margin-bottom: 16upx;
		.text-name{
			margin-right: 8upx;
		}
		text{
			font-size: 24upx;
			color:#666666;
		}
	}
	.item1{
		display: flex;
		flex-direction: column;
		background-color: #FFFFFF;
		border-radius: 8upx;
		margin: 32upx;
		padding: 32upx;
		.title-text {
			font-size: 32upx;
			color: #000000;
			font-weight: bold;
			margin-bottom: 16upx;
		}
		.warn-info1{
			color:#FF6A15;
			font-size:28upx ;
			margin-bottom: 16upx;
		}
		
	}


</style>
